<template>
  <!-- task form -->
  <el-form
    ref="task"
    :model="taskform"
    :rules="taskrules"
    label-width="140px"
    label-position="right"
  >
    <el-form-item label="所属项目" prop="project_name">
      <el-input :value="currentProject.project_name" disabled></el-input>
    </el-form-item>
    <el-form-item label="所属文件夹" prop="folder">
      <el-input :value="folderName" disabled></el-input>
    </el-form-item>
    <el-form-item label="作业名称" prop="name">
      <el-input v-model="taskform.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="taskform.email"></el-input>
    </el-form-item>

    <el-form-item label="Streaming 任务" prop="type">
      <el-radio-group v-model="taskform.type">
        <el-radio :label="0">否</el-radio>
        <el-radio :label="1">是</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="作业描述" prop="description">
      <el-input v-model="taskform.description" :rows="6" type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="作业类型" prop="operator">
      <el-select v-model="taskform.operator" clearable placeholder="请选择">
        <el-option
          v-for="item in OP_OPTIONS"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "TaskCreate",
  props: {
    folderId: String,
    folderName: String
  },
  data() {
    return {
      OP_OPTIONS: [],
      taskDialogVisible: false,
      taskform: {
        id: "",
        project_name: "",
        folder: "",
        name: "",
        email: "",
        description: "",
        operator: "",
        content: "",
        type: 0
      },
      taskrules: {
        name: [{ required: true, message: "请输入作业名称", trigger: "blur" }],
        email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
        type: [{ required: true, message: "请选择Streaming 任务", trigger: "blur" }],
        description: [{ required: true, message: "请输入作业描述", trigger: "blur" }],
        operator: [{ required: true, message: "请选择作业类型", trigger: "change" }]
      }
    };
  },
  computed: {
    ...mapState({
      currentProject: ({ project }) => {
        return project.currentProject || {};
      }
    })
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$http.task.getTaskTypes().then(res => {
        this.OP_OPTIONS = res;
      });
    },
    validator() {
      return new Promise((resolve, reject) => {
        this.$refs.task.validate(valid => {
          resolve(valid);
        });
      });
    },
    save() {
      if(this.taskform.operator == 'DATAFACTORY' && this.taskform.type == 0) {
        this.$message.warning('DATAFACTORY 作业类型必须是 Streaming 任务')
        return false
      }
      let formData = Object.assign({}, this.taskform, {
        project_id: this.currentProject.id,
        folder_id: this.folderId
      });
      return this.$http.task.addTask({
        project_id: formData.project_id,
        folder_id: formData.folder_id,
        name: formData.name,
        operator: formData.operator,
        content: formData.content,
        description: formData.description,
        type: formData.type,
        email: formData.email
      });
    },
    clearForm() {
      this.taskform.description = "";
      this.taskform.name = "";
      this.taskform.operator = "";
      this.taskform.type = 0;
      this.taskform.email = ""
    }
  }
};
</script>
